import React from 'react'
import PropTypes from 'prop-types'
import { Col, Row, Form, Input, Button } from 'antd';

class CommentsArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
    this.doComment = this.doComment.bind(this)
    this.collect = this.collect.bind(this)
  }
  componentDidMount() {

  }
  // 评论
  doComment(e) {
    e.preventDefault();
    const content = this.props.form.getFieldValue('comment');
    this.props.submit(content).then(() => this.props.form.resetFields())
  }
  // 收藏
  collect() {
    this.props.collect()
  }
  render() {
    const FormItem = Form.Item;
    const { getFieldDecorator } = this.props.form;
    return (
      <Row>
        <Col span={24}>
          <p className="comments-title" id="comments-form">你的评论:</p>
          <Form layout="vertical" onSubmit={this.doComment}>
            <FormItem >
              {getFieldDecorator(
                  'comment',
                  {
                    rules: [{ required: true, message: '请输入评论' }],
                  },
                )(<Input type="textarea" placeholder="请输入你的评论" rows="5" />)
              }
            </FormItem>
            <FormItem className="button">
              <Button type="primary" htmlType="submit">提交评论</Button>
              <Button type="primary" htmlType="button" onClick={this.collect}>收藏文章</Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    )
  }
}
export default Form.create({})(CommentsArea);

CommentsArea.propTypes = {
  form: PropTypes.objectOf(Object),
  submit: PropTypes.func,
  collect: PropTypes.func,
}
